<!DOCTYPE html>
<html>
<head>
<title>p-V Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = 'italic 20px Times New Roman';

    // Arrow drawing utility for axes
    function drawAxisArrow(x1, y1, x2, y2, angle = Math.PI / 8, length = 10) {
        const dx = x2 - x1;
        const dy = y2 - y1;
        const originalAngle = Math.atan2(dy, dx);
        
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - length * Math.cos(originalAngle - angle), y2 - length * Math.sin(originalAngle - angle));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - length * Math.cos(originalAngle + angle), y2 - length * Math.sin(originalAngle + angle));
        ctx.stroke();
    }
    
    // Arrow drawing utility for paths on the cycle
    function drawPathArrow(x, y, angle, size = 10) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(size, -size/2.5);
        ctx.moveTo(0, 0);
        ctx.lineTo(size, size/2.5);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.restore();
    }

    // Origin and axis setup
    const origin = { x: 50, y: 360 };
    
    // Draw p-axis (vertical)
    drawAxisArrow(origin.x, origin.y, origin.x, 40);
    ctx.fillText('p', origin.x - 20, 40);

    // Draw V-axis (horizontal)
    drawAxisArrow(origin.x, origin.y, 460, origin.y);
    ctx.fillText('V', 465, origin.y + 8);
    
    // Draw Origin label
    ctx.fillText('O', origin.x - 25, origin.y + 20);

    // Define key points for the cycle's vertices
    const pA = { x: 110, y: 80 };
    const pB = { x: 430, y: 310 };
    const pD = { x: 110, y: 240 };
    // Point C is a label on the lower path
    const pC_label = { x: 250, y: 320 };

    // Draw the cycle path
    ctx.beginPath();
    
    // Path a -> b (Top curve)
    ctx.moveTo(pA.x, pA.y);
    ctx.bezierCurveTo(130, 200, 310, 310, pB.x, pB.y);
    
    // Path b -> d (Bottom curve, passing near c)
    ctx.bezierCurveTo(330, 325, 190, 315, pD.x, pD.y);

    // Path d -> a (Vertical line)
    ctx.lineTo(pA.x, pA.y);
    ctx.stroke();

    // Draw labels for points
    ctx.fillText('a', pA.x + 5, pA.y - 5);
    ctx.fillText('b', pB.x, pB.y + 20);
    ctx.fillText('c', pC_label.x, pC_label.y + 20);
    ctx.fillText('d', pD.x - 20, pD.y + 5);
    
    // Draw arrows on the path to indicate cycle direction
    // Arrow on d -> a
    drawPathArrow(110, 160, Math.PI / 2);
    // Arrow on a -> b
    drawPathArrow(255, 270, -0.6 * Math.PI);
    // Arrow on b -> c section
    drawPathArrow(350, 318, Math.PI);
    // Arrow on c -> d section
    drawPathArrow(190, 290, 1.2 * Math.PI);

</script>
</body>
</html>